<script setup>
import {delAuthorityAPI, getAllAuthorityAPI, getAuthorityPageAPI} from "@/api/manager.js";
import {ref, provide, onBeforeMount, watchEffect} from 'vue'
import AddAuthority from "@/views/index/manager/components/AddAuthority.vue";
import UpdateAuthority from "@/views/index/manager/components/UpdateAuthority.vue";

const env = import.meta.env
const AUTHORITY_NAME_MAX_LEN = env.VITE_AUTHORITY_NAME_MAX_LEN
const AUTHORITY_CODE_MAX_LEN = env.VITE_AUTHORITY_CODE_MAX_LEN

// 下拉选择选项
const selectOptions = [
  {label: '全部', value: ''},
  {label: '禁用', value: true},
  {label: '开放', value: false},
]
// 下拉选择
const selectValue = ref(null)

// 权限名称与权限编码匹配条件
const authorityNameMatch = ref(null)
const authorityCodeMatch = ref(null)
watchEffect(() => {
  if (authorityNameMatch.value === '') authorityNameMatch.value = null
  if (authorityCodeMatch.value === '') authorityCodeMatch.value = null
})

// 分页数据
const current = ref(1)
const pageSize = ref(10)
const pageCnt = ref(0)
const size = ref(0)
const data = ref([])

const getAuthorityPage = async (current_, pageSize_, disabled_ = null, nameMatch_ = null, codeMatch_ = null) => {
  const res = await getAuthorityPageAPI(current_, pageSize_, disabled_, nameMatch_, codeMatch_)
  if (res === null) return
  current.value = res.current
  pageSize.value = res.pageSize
  pageCnt.value = res.pageCnt
  size.value = res.size
  data.value = res.data
}

// 初始查询
onBeforeMount(async () => {
  await getAuthorityPage(current.value, pageSize.value)
})

// 条件查询
const searchByCondition = async () => {
  await getAuthorityPage(current.value, pageSize.value, selectValue.value, authorityNameMatch.value, authorityCodeMatch.value)
}

// 新增权限是否显示
const addAuthorityVisible = ref(false)
// 显示
const showAddAuthority = () => {
  addAuthorityVisible.value = true
}
// 传递给子组件
provide('addAuthorityVisible', {
  addAuthorityVisible,
  searchByCondition
})

// 修改权限是否显示
const updateAuthorityVisible = ref(false)
// 传递给子组件的权限数据
const updateAuthorityData = ref({})
// 显示
const showUpdateAuthority = (idx) => {
  console.log(data.value[idx])
  updateAuthorityVisible.value = true
  updateAuthorityData.value = data.value[idx]
}
// 传递给子组件
provide('updateAuthority', {
  updateAuthorityVisible,
  updateAuthorityData,
  searchByCondition
})

// 分页每页数据大小改变
const handlePageSizeChange = async (val) => {
  pageSize.value = val
  await searchByCondition()
}
// 当前页发生变化
const handleCurrentChange = async (val) => {
  current.value = val
  await searchByCondition()
}

// 为表格的禁用行添加禁用类名
const tableRowClassName = ({row: auth}) => {
  if (auth.disabled === true) return 'disabled-row'
  return ''
}

// 删除权限
const delAuthority = async (idx) => {
  const authority = data.value[idx]
  const res = await ElMessageBox.confirm(
      `是否确认删除权限：${authority.name}`,
      '权限删除',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(async () => {
    // 执行权限删除
    return await delAuthorityAPI(authority.id)
  }).catch(() => {
    return false
  })
  // 成功
  if (res) await searchByCondition()
}
</script>

<template>
  <div class="authority w-full min-w-max flex justify-center items-start">
    <div class="glass-container p-8">
      <div class="flex justify-between items-center">
        <div class="flex-1 flex justify-start items-center">
          <el-select v-model="selectValue" class="select w-28" placeholder="是否禁用">
            <el-option
                v-for="item in selectOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
          <div>
            <el-input class="ipt" v-model="authorityNameMatch" clearable :maxlength="AUTHORITY_NAME_MAX_LEN"
                      show-word-limit placeholder="请输入权限名称"/>
          </div>
          <div>
            <el-input class="ipt" v-model="authorityCodeMatch" clearable :maxlength="AUTHORITY_CODE_MAX_LEN"
                      show-word-limit placeholder="请输入权限编码"/>
          </div>
          <el-button type="primary" plain @click="searchByCondition">搜索</el-button>
        </div>
        <el-button type="primary" plain @click="showAddAuthority">新增权限</el-button>
      </div>
      <el-table class="mt-4" style="width: 100%" :data="data" :row-class-name="tableRowClassName">
        <el-table-column prop="id" label="ID" width="80"/>
        <el-table-column prop="name" label="权限名称" width="150"/>
        <el-table-column prop="code" label="权限编码" width="200"/>
        <el-table-column prop="disabled" label="权限是否禁用" width="120"/>
        <el-table-column prop="description" label="权限描述" width="400"/>
        <el-table-column fixed="right" label="操作" width="150">
          <template #default="scope">
            <el-button type="info" plain size="small" @click="showUpdateAuthority(scope.$index)">修改</el-button>
            <el-button type="danger" plain size="small" @click="delAuthority(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="mt-4 flex justify-end items-center">
        <el-pagination
            v-model:current-page="current"
            v-model:page-size="pageSize"
            :page-sizes="[1, 10, 20, 30, 40]"
            :total="pageCnt"
            layout="sizes, prev, pager, next, jumper"
            @size-change="handlePageSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
  <AddAuthority></AddAuthority>
  <UpdateAuthority></UpdateAuthority>
</template>

<style lang="scss">
// 表格禁用行样式
.el-table .disabled-row {
  --el-table-tr-bg-color: #f4f4f5;
  --el-table-row-hover-bg-color: #f4f4f5;
  color: #cbcccf;
}
</style>